<template>
    <el-container>
        <el-main>

            <!--<el-row>-->
            <!--<el-col>-->
            <!-- Form -->
            <el-button type="text" @click="addRule()">新增规则</el-button>

            <el-dialog title="规则" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input v-model="form.ruName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="倍数" :label-width="formLabelWidth">
                        <el-input v-model="form.topStep" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="跌幅起点" :label-width="formLabelWidth">
                        <el-input v-model="form.dnPoint" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="跌幅起价" :label-width="formLabelWidth">
                        <el-input v-model="form.dnInit" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="跌幅增量" :label-width="formLabelWidth">
                        <el-input v-model="form.dnAdd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="涨幅起点" :label-width="formLabelWidth">
                        <el-input v-model="form.upPoint" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="涨幅起价" :label-width="formLabelWidth">
                        <el-input v-model="form.upInit" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="涨幅增量" :label-width="formLabelWidth">
                        <el-input v-model="form.upAdd" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveRule()">确 定</el-button>
                </div>
            </el-dialog>

            <!--</el-col>-->
            <!--</el-row>-->

            <el-row style="margin-bottom: 30px">
                <el-col :span="24">
                    <el-table :data="ruleList" style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-row>
                                    <el-col :span="2" v-for="item in props.row.upDnCalcList" v-bind:key="item.trStep">
                                        <el-row>
                                            <el-col style="background-color: #e7eaed;font-size: larger">
                                                {{item.trStep}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col style="background-color: #fe5c57">{{item.upPercent?
                                                item.upPercent+'%':'null'}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col style="background-color: #00d800">{{item.dnPercent?
                                                -item.dnPercent+'%':'null'}}
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="id" width="50"></el-table-column>
                        <el-table-column prop="ruName" label="名称" width="300"></el-table-column>
                        <el-table-column prop="topStep" label="倍数" width="80"></el-table-column>
                        <el-table-column prop="dnPoint" label="跌幅起点" width="80"></el-table-column>
                        <el-table-column prop="dnInit" label="跌幅起价" width="80"></el-table-column>
                        <el-table-column prop="dnAdd" label="跌幅增量" width="80"></el-table-column>
                        <el-table-column prop="upPoint" label="涨幅起点" width="80"></el-table-column>
                        <el-table-column prop="upInit" label="涨幅起价" width="80"></el-table-column>
                        <el-table-column prop="upAdd" label="涨幅增量" width="80"></el-table-column>
                        <el-table-column prop="unitNames" label="股票名称" width="200"></el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-button size="small" style="background: red" @click="editRule(scope.row)">编辑
                                    </el-button>
                                    <el-button size="small" style="background: green" @click="deleteRule(scope.row)">
                                        删除
                                    </el-button>

                                </el-row>
                                <el-row>


                                </el-row>

                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-main>
    </el-container>

</template>

<script>
    export default {
        components: {},

        data() {
            return {
                ruleList: [],
                dialogFormVisible: false,
                formLabelWidth: '120px',
                form: {
                    "id": 1,
                    "ruName": "传媒etf",
                    "dnPoint": 0,
                    "dnInit": 3.0,
                    "dnAdd": 1.5,
                    "upPoint": -1,
                    "upInit": 3.3,
                    "upAdd": 1.7,
                    "topStep": 3
                }
            };
        },
        beforeMount() {
            this.listRule();
        },
        watch: {},
        methods: {
            //列表数据
            listRule() {
                this.$get("/rule/list", {}).then((res) => {
                    this.ruleList = res;
                });
            },
            addRule() {
                this.form = {};
                this.dialogFormVisible = true
            },
            saveRule() {
                this.$postData("/rule/save", this.form).then((res) => {
                    this.$message.success(res);
                    this.form = {}
                    this.dialogFormVisible = false
                    this.listRule();
                });
            },
            editRule(row) {
                this.$get("/rule/get?id=" + row.id, {}).then((res) => {
                    this.form = res;
                    this.dialogFormVisible = true;
                });


            },
            deleteRule(row) {
                this.$confirm("删除？确认!", "删除" + row.ruName, {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$post("/rule/delete?id=" + row.id, {}).then((res) => {
                            this.$message.success(res);
                            //刷新表格
                            this.listRule();
                        });
                    })
                    .catch(() => {

                    });
            }

        }
    };
</script>


<style lang='scss' scoped>

    .el-row {
        margin-bottom: 1px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .grid-content {
        border-radius: 0px;
        min-height: 50px;
        font-size: 20px;
        font-family: 粗体;
    }

    .bg-purple-dark {
        background: rgba(255, 255, 255, 0.2);
    }

</style>

